<template>
  <div>
    <!-- title是对话框的标题 -->
    <!-- visible: 是否显示, sync同步控制 -->
    <el-dialog
      :title="msg.type == 'add' ? '添加角色' : '修改角色'"
      :visible.sync="msg.isShow"
      width="50%"
    >
      <!-- model: 表单的变量 -->
      <!-- rules: 校验的规则 -->
      <el-form
        ref="ruleFrom"
        :model="ruleFrom"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="rolename">
          <el-input type="text" v-model="ruleFrom.rolename"></el-input>
        </el-form-item>

        <el-form-item label="权限" prop="menus">
          <!-- data: 树形控件的数据 -->
          <!-- show-checkbox: 显示选框 -->
          <!-- default-expand-all: 默认展开所有项 -->
          <!-- node-key: 选择节点的方式 -->
          <!-- highlight-current: 高亮显示当前项 -->
          <!-- props: 树形数据的配置项 -->
          <!-- check-strictly: 严格模式 -->
          <el-tree
            :data="treeData"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            
          >
          </el-tree>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleFrom.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item>
        <el-button type="success" @click="onSubmit">立即创建</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item> -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="success" v-if="msg.type == 'add'" @click="submit"
          >立即添加</el-button
        >
        <el-button type="success" v-if="msg.type == 'edit'" @click="submit"
          >立即修改</el-button
        >
        <el-button type="primary" @click="reset">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuListApi, addRoleListApi, editRoleListApi } from "../../api";

export default {
  props: ["msg"],
  data() {
    return {
      // 重置的数据
      isStrictly:true,
      resetVal:{},
      // 表单数据
      ruleFrom: {
        menus: "",
        status: 1,
        rolename: "",
      },
      rules: {
        rolename: [
          // required 必填项, message 是报错信息,  trigger 是触发方式
          { required: true, message: "请输入活动名称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
      // 树形数据
      treeData: [],
      // 树形数据的配置项
      defaultProps: {
        children: "children",
        // label 字段名对应的变量
        label: "title",
      },
    };
  },
  created() {
    // 获取菜单的树形数据, 给权限的树形控件
    this.getMenuTreeData()
  },
  methods: {
    async getMenuTreeData(){
      let res = await getMenuListApi();
      this.treeData = res.list
    },
    setVal(info) {
      this.resetVal = {...info}

      // 此处info是 list 传回的表单数据 tableData  引用数据类型 直接赋值是 数据地址赋值  ruleFrom 绑定v-model  修改 tableData也会事实修改  使用...解构赋值可以解决此问题
      this.ruleFrom = { ...info };

        // vue更新DOM节点是异步执行的, 使用nextTick, 回调函数将在 DOM 更新完成之后被调用
        //  this.$nextTick 在下次DOM更新循环结束之后执行延迟回调, 在修改数据之后立即使用这个方法,获取更新之后的DOM
        this.isStrictly = false
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.ruleFrom.menus.split(','));
        })
    },
    submit() {
      this.$refs.ruleFrom.validate(async (val) => {
        if (val) {
          // getCheckedKeys  获取选中的项, 将id组成一个数组
          // getHalfCheckedKeys  获取半选中的项, 用来处理父节点, 将id组成一个数组
          console.log(this.$refs.tree.getCheckedKeys());
          console.log(this.$refs.tree.getHalfCheckedKeys());
          // 将选中和半选中的项concat合并成数组添加到menus中
          this.ruleFrom.menus = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
          console.log(this.ruleFrom);

          if (this.msg.type == "add") {
            let res = await addRoleListApi(this.ruleFrom)
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: res.msg,
                  });
                } else {
                  this.$message({
                    type: "warning",
                    message: res.msg,
                  });
                }
                this.msg.isShow = false;
          } else {
            let res = await editRoleListApi(this.ruleFrom);
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.msg.isShow = false;
          }
          this.$emit("update");
        } else {
          // 校验失败
          return false;
        }
      });
    },
    // 点击充值按钮
    reset(){
      this.ruleFrom = {...this.resetVal};
      // 只有树形控件才需要setCheckedKeys
      this.$refs.tree.setCheckedKeys(this.resetVal.menus.split(','));
    }




  },
};
</script>

<style>
.el-checkbox-group {
  line-height: 30px;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
}

.el-submenu__title {
  display: flex;
  justify-content: flex-start;
}

.el-menu-item-group__title {
  display: none;
}
</style>